<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <!-- <link rel="stylesheet" type="text/css" href="../css/header.css" /> -->
        <link rel="stylesheet" type="text/css" href="../css/adimisterAddress.css" />



        <script type="text/javascript" src="../js/flexible.debug.js"></script>

        <script type="text/javascript" src="../js/flexible_css.debug.js"></script>

    </head>
   <body>
        <header class="header">
            <span class="span fanghui"><img src="../img/fanhui.png"/></span>
            <span class="span">管理收货地址</span>
            <span class="span"></span>
        </header>


        <main class="main">
            <section class="section">
            <div class="content">
               <div class="left">
                   <p><span>张晓琳</span><span>13669045288</span></p>
                   <p>北京市海淀区西北旺永嘉北路6号</p>
               </div> 
               <div class="right">
                   <img src="../img/true.png"/>
                    <button>删除</button>
               </div>
                
            </div>


            
            <div class="content">
               <div class="left">
                   <p class="_p"><span>李应　</span><span>13669045288</span></p>
                   <p class="p">北京市朝阳区朝阳北路</p>
               </div> 
               <div class="right">
               		<img src="../img/true.png"/>		
                    <button>删除</button>
               </div>
                
            </div>




            <div class="content">
               <div class="left">
                   <p><span>王海洋</span><span>13669045288</span></p>
                   <p>北京市昌平区回龙观流星花园</p>
               </div> 
               <div class="right">
               		<img src="../img/true.png"/>
                   <button>删除</button>
               </div>
                
            </div>
            
            
          
        
            </section>
        </main>

        <footer>
            <ul>
                <li>
                <img src="../img/add.png" height="40" width="40"/>
                <p href="#">增加新地址</p>
                </li>
               
            </ul>
        </footer>
			<!--模板里面的text/html 是不可更改的-->
           <script type="text/html" id="tr-temp">
           	<!--模板循环each  as 是固定写法   循环list里面的每一项-->
		    {{each list as v}}
		    <div class="content">
               <div class="left">
                   <p><span>{{v.sj}}</span><span>　{{v.call}}</span></p>
                   <p>{{v.address}}</p>
               </div> 
               <div class="right">
               	<img src="../img/true.png"/>
                   <button>删除</button>
               </div>
                
           </div>
           {{/each}}
		</script>




        <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
        <script src="../js/artTemplate.js"></script>
        <script type="text/javascript">

          $(function(){
              $('footer  li').click(function(){
                location.href="../html/newAddress.html";
              })
              
              
              
              
              
              
				function get(name){
					//获取存储的数据
            	return localStorage.getItem(name);
          		  }
               // 在第二个页面再次获取
   				var infos = get("infos");
   				//如果infos里面的数据不为空
                if(infos != ""){
                 //就把里面的对象转换成js数组对象
                    infos = JSON.parse(infos);
                      //利用模板把数据储存起来    template("tr-temp")是模板的固定写法  不可更改
                    var str = template("tr-temp", {list: infos});
                    //把模板里面存储的值渲染到页面上
                    $(".section").append(str);
                }








			
			$('.content').click(function(){
				$('.content .right img').hide();
				$('.content .right img').eq($(this).index()).show();
				
			})
			$('.fanghui').click(function(){
                location.href="myInformation.html";
            });
			
          })


        </script>
    </body>
</html>